﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>上海七彩网络科技有限公司1</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="https://res.7csoft.com/cui/cui.min.css" />
    <link rel="stylesheet" href="https://res.7csoft.com/cui/cui.vue.css" />
    <link rel="stylesheet" href="/css/site.min.css" />
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <script src="/js/h5f.min.js"></script>
    <![endif]-->
    <style>
        #box {
            max-width: 1200px;
            margin:0 auto;
            min-height: 200px;
            height: 100%;
            max-height: 600px;
            padding: 20px;
            margin: 0 auto;
            background: #FFF;
        }
        .flex1 { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
        .article-load-content .file-select-wrapper { float:none; }
    </style>
</head>

<body>
    <div class="am-g">
        <div class="am-u-lg-6">
            <div class="am-input-group">
                <span class="am-input-group-btn">
                    <button class="am-btn am-btn-default" type="button"><span class="am-icon-search"></span> </button>
                </span>
                <input type="text" class="am-form-field">
            </div>
        </div>
        <div class="am-u-lg-6">
            <div class="am-input-group">
                <input type="text" class="am-form-field">
                <span class="am-input-group-btn">
                    <button class="am-btn am-btn-default" type="button">手气还行</button>
                </span>
            </div>
        </div>
    </div>
    <div id="box" class="contact">
        <form class="am-form" style="padding-top:20px">
            <div class="am-form-group">
                <label class="am-u-md-2">联系人</label>
                <div class="am-u-md-10 group">
                    <div class="am-u-md-3">
                        <select v-model="article_load_type" v-on:change="handleGetArticle">
                            <option value="" selected>快速加载文章...</option>
                            <option value="1">加载微信文章</option>
                            <option value="2">加载网页文章</option>
                            <option value="3">从Word加载文章</option>
                            <option value="4">从PDF加载文章</option>
                        </select>
                    </div>
                    <div class="am-u-md-9 am-padding-left-0 article-load-content" v-if="article_load_type">
                        <div v-if="article_load_type==='1' || article_load_type==='2'" class="am-input-group am-padding-0" style="width:100%">
                            <input type="text" ref="article_load_url" :placeholder="articleLoadPlaceholder" />
                            <span class="am-input-group-btn">
                                <i-button skin="primary" icon="cloud-download" :loading="submitting" v-on:click="handleLoadArticle">加载</i-button>
                            </span>
                        </div>
                        <Upload v-else name="article_load_file" :format="article_load_type==='3'?['doc','docx']:['pdf']" :max-size="10240" :max="1" type="custom" action="http://localhost:53106/upload">
                            <i-button skin="primary" icon="icon-file" :loading="submitting" style="width:100%">选择{{article_load_type==='3'?'Word':'PDF'}}文件...</i-button>
                        </Upload>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://res.7csoft.com/lib/vue/vue.min.js"></script>
    <script src="https://res.7csoft.com/cui/cui.vue.js"></script>
    <!--<script src="https://res.7csoft.com/lib/anime.min.js"></script>-->
    <script>
        new Vue({
            el: '#box',
            data: {
                submitting:false,
                article_load_type: "1"
            },
            methods: {
                handleGetArticle: function () {

                },
                handleLoadArticle: function (type) {
                    var url = this.$refs.article_load_url.value;
                    if (!url)
                    {
                        this.$Message.warning(this.articleLoadPlaceholder);
                        return;
                    }
                    console.log("地址:", url);
                }
            },
            computed: {
                articleLoadPlaceholder: function () {
                    if (this.article_load_type === '1')
                        return '请输入微信文章地址...';
                    if (this.article_load_type === '2')
                        return '请输入网页地址...';
                    return '';
                }
            }
        });
        function showCaptcha() {
            $('#captcha').attr('src', '/captcha');
            $('#captcha_group').show();
        }
    </script>
</body>

</html>